<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>平台介绍 - 壹加壹农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">平台介绍</h1>
                <button onclick="window.location.href='../index.html'" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-home text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <main class="pb-20">
            <!-- 平台头图 -->
            <section class="relative h-56 bg-gradient-to-br from-primary via-primary-dark to-secondary overflow-hidden">
                <div class="absolute inset-0 opacity-10">
                    <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&h=500&fit=crop&q=90" 
                         alt="农业背景" class="w-full h-full object-cover">
                </div>
                <div class="absolute inset-0 flex flex-col items-center justify-center text-white p-6">
                    <div class="w-20 h-20 rounded-3xl bg-white/20 backdrop-blur-md flex items-center justify-center mb-4 border-2 border-white/50">
                        <i class="fa fa-leaf text-4xl"></i>
                    </div>
                    <h1 class="text-2xl font-bold mb-2">壹加壹农业服务平台</h1>
                    <p class="text-sm text-white/90 text-center">智慧农业 · 美好生活</p>
                </div>
            </section>

            <!-- 企业介绍 -->
            <section class="px-4 mt-8 mb-4">
                <div class="bg-white rounded-3xl p-6 shadow-large border border-gray-100">
                    <div class="flex items-center gap-3 mb-4 pb-4 border-b border-gray-100">
                        <div class="w-12 h-12 rounded-2xl gradient-primary flex items-center justify-center">
                            <i class="fa fa-building text-white text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-lg font-bold text-text-primary">企业简介</h2>
                            <p class="text-xs text-text-secondary mt-1">嘉祥县壹加壹农业种植农民专业合作社</p>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <p class="text-sm text-text-secondary leading-relaxed">
                            嘉祥县壹加壹农业种植农民专业合作社成立于2020年，是一家专注于现代农业服务的专业合作社。我们致力于为农民提供全方位、一站式的农业服务解决方案，推动农业现代化发展。
                        </p>
                        
                        <div class="grid grid-cols-3 gap-3 py-4">
                            <div class="text-center p-3 rounded-xl bg-primary/5">
                                <div class="text-2xl font-bold text-primary mb-1">500+</div>
                                <div class="text-xs text-text-secondary">服务农户</div>
                            </div>
                            <div class="text-center p-3 rounded-xl bg-secondary/5">
                                <div class="text-2xl font-bold text-secondary mb-1">1000+</div>
                                <div class="text-xs text-text-secondary">服务次数</div>
                            </div>
                            <div class="text-center p-3 rounded-xl bg-accent/5">
                                <div class="text-2xl font-bold text-accent mb-1">98%</div>
                                <div class="text-xs text-text-secondary">满意度</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 核心优势 -->
            <section class="px-4 mb-4">
                <div class="bg-white rounded-3xl p-6 shadow-soft border border-gray-100">
                    <h2 class="text-lg font-bold text-text-primary mb-4 flex items-center">
                        <span class="w-1 h-5 bg-primary rounded-full mr-3"></span>
                        核心优势
                    </h2>
                    <div class="space-y-3">
                        <div class="flex gap-3 p-4 rounded-xl bg-gradient-to-r from-primary/5 to-transparent">
                            <div class="w-10 h-10 rounded-xl gradient-primary flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-rocket text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-text-primary mb-1">专业服务团队</h3>
                                <p class="text-xs text-text-secondary">拥有经验丰富的农业服务团队，提供专业化、标准化服务</p>
                            </div>
                        </div>
                        
                        <div class="flex gap-3 p-4 rounded-xl bg-gradient-to-r from-secondary/5 to-transparent">
                            <div class="w-10 h-10 rounded-xl gradient-secondary flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-cogs text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-text-primary mb-1">先进设备支持</h3>
                                <p class="text-xs text-text-secondary">配备现代化农业机械设备，提升作业效率和质量</p>
                            </div>
                        </div>
                        
                        <div class="flex gap-3 p-4 rounded-xl bg-gradient-to-r from-accent/5 to-transparent">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-orange-500 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-handshake text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-text-primary mb-1">一站式服务</h3>
                                <p class="text-xs text-text-secondary">从种植到销售，提供全产业链服务支持</p>
                            </div>
                        </div>
                        
                        <div class="flex gap-3 p-4 rounded-xl bg-gradient-to-r from-primary/5 to-transparent">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-emerald-600 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-shield text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-text-primary mb-1">品质保障</h3>
                                <p class="text-xs text-text-secondary">严格的质量管理体系，确保服务质量和效果</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 服务范围 -->
            <section class="px-4 mb-4">
                <div class="bg-white rounded-3xl p-6 shadow-soft border border-gray-100">
                    <h2 class="text-lg font-bold text-text-primary mb-4 flex items-center">
                        <span class="w-1 h-5 bg-primary rounded-full mr-3"></span>
                        服务范围
                    </h2>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl gradient-primary flex items-center justify-center mb-3">
                                <i class="fa fa-tractor text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">农机服务</h3>
                            <p class="text-xs text-text-secondary">耕地、播种、收割等农机作业服务</p>
                        </div>
                        
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl gradient-secondary flex items-center justify-center mb-3">
                                <i class="fa fa-dollar text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">金融支持</h3>
                            <p class="text-xs text-text-secondary">低息贷款、融资租赁等金融服务</p>
                        </div>
                        
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent to-orange-500 flex items-center justify-center mb-3">
                                <i class="fa fa-truck text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">物流配送</h3>
                            <p class="text-xs text-text-secondary">农产品运输、冷链物流服务</p>
                        </div>
                        
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-emerald-600 flex items-center justify-center mb-3">
                                <i class="fa fa-users text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">劳务派遣</h3>
                            <p class="text-xs text-text-secondary">专业农业劳务人员派遣服务</p>
                        </div>
                        
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl gradient-primary flex items-center justify-center mb-3">
                                <i class="fa fa-shopping-cart text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">农产代销</h3>
                            <p class="text-xs text-text-secondary">帮助农户销售优质农产品</p>
                        </div>
                        
                        <div class="p-4 rounded-xl bg-neutral border border-gray-100">
                            <div class="w-12 h-12 rounded-xl gradient-secondary flex items-center justify-center mb-3">
                                <i class="fa fa-building-o text-white text-xl"></i>
                            </div>
                            <h3 class="text-sm font-bold text-text-primary mb-1">办公场地</h3>
                            <p class="text-xs text-text-secondary">现代化办公场所租赁服务</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 联系我们 -->
            <section class="px-4 mb-4">
                <div class="bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 rounded-3xl p-6 border border-primary/20">
                    <h2 class="text-lg font-bold text-text-primary mb-4 flex items-center">
                        <span class="w-1 h-5 bg-primary rounded-full mr-3"></span>
                        联系我们
                    </h2>
                    <div class="space-y-3">
                        <div class="flex items-center gap-3 p-4 bg-white/80 backdrop-blur-sm rounded-xl">
                            <div class="w-10 h-10 rounded-xl gradient-primary flex items-center justify-center">
                                <i class="fa fa-building text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs text-text-secondary mb-1">企业名称</div>
                                <div class="text-sm font-medium text-text-primary">嘉祥县壹加壹农业种植农民专业合作社</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-3 p-4 bg-white/80 backdrop-blur-sm rounded-xl">
                            <div class="w-10 h-10 rounded-xl gradient-secondary flex items-center justify-center">
                                <i class="fa fa-map-marker text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs text-text-secondary mb-1">地址</div>
                                <div class="text-sm font-medium text-text-primary">山东省济宁市嘉祥县</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-3 p-4 bg-white/80 backdrop-blur-sm rounded-xl">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-orange-500 flex items-center justify-center">
                                <i class="fa fa-phone text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs text-text-secondary mb-1">联系电话</div>
                                <div class="text-sm font-medium text-text-primary">400-123-4567</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-3 p-4 bg-white/80 backdrop-blur-sm rounded-xl">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-emerald-600 flex items-center justify-center">
                                <i class="fa fa-clock-o text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs text-text-secondary mb-1">服务时间</div>
                                <div class="text-sm font-medium text-text-primary">周一至周日 8:00-18:00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 加入我们 -->
            <section class="px-4 mb-4">
                <button class="w-full gradient-primary text-white py-4 rounded-2xl font-bold text-base hover:shadow-xl transition-all flex items-center justify-center gap-2" onclick="window.location.href='../pages/login.html'">
                    <i class="fa fa-user-plus"></i>
                    立即加入壹加壹农业
                </button>
            </section>
        </main>
        
        <!-- 底部导航 -->
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Components.initComponents('home');
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>

